<!--
 * @Author: your name
 * @Date: 2021-11-21 11:49:32
 * @LastEditTime: 2021-12-06 15:40:24
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \shenshan_cim\src\views\Home\xmxz\left\EventFiltering\index.vue
-->
<template>
  <div class="EventFiltering">
    <div class="title">
      <div class="icon">
        <img src="../../../../../assets/images/init/编组 17.png" alt />
      </div>
      <div class="text">事件筛选</div>
    </div>
    <div class="Filtering_box">
      <!-- <div class="Filter">
        <div class="tit">
          <span>
            项目选址分析
          </span>
        </div>
        <div class="case">
          <a-radio-group
            v-model="radioType"
            @change="onChange"
            name="radioGroup"
            :default-value="1"
          >
            <a-radio value="m²">
              平方米
            </a-radio>
            <a-radio value="mu">
              亩
            </a-radio>
            <a-radio value="ha">
              公顷
            </a-radio>
          </a-radio-group>
        </div>
      </div>-->
      <div class="Filter">
        <div class="tit">
          <span>地块范围</span>
        </div>
        <div class="case">
          <div class="draw_area">
            <div
              class="status"
              @click="ChangStatus(1)"
              :style="{ background: radioChoise === 1 ? '#409EFF' : '#fff' }"
            ></div>
            <a-radio-button
              value="多边形绘制"
              @click="polygonClick()"
              title="点击右键时完成绘制"
              >多边形绘制</a-radio-button
            >
            <!-- <el-radio v-model="radioChoise" label="1" @click="radioClick('1')">
              
             
            </el-radio>-->
          </div>
          <div class="import_area">
            <div
              class="status"
              @click="ChangStatus(2)"
              :style="{ background: radioChoise === 2 ? '#409EFF' : '#fff' }"
            ></div>
            <!-- <el-radio v-model="radioChoise" label="2" @click="radioClick('2')"> -->
            <!-- <a-upload
              action="http://19.103.11.93:8090/overlay/analysis/upload/shp"
              :multiple="true"
              :file-list="fileList"
              @change="handleChange"
            > -->
            <a-upload
              action="http://42.81.211.242:8990/overlay/analysis/upload/shp"
              :multiple="true"
              :file-list="fileList"
              @change="handleChange"
            >
              <a-button>
                <img
                  :style="{ width: '14px', margin: '0 5px 0 -5px' }"
                  src="../../../../../assets/images/init/Subtract.png"
                  alt
                />
                导入
              </a-button>
            </a-upload>
            <!-- </el-radio> -->
          </div>
        </div>
      </div>
      <div :style="{ marginTop: '60px', marginBottom: '35px' }" class="Filter">
        <div class="tit">
          <span>现状</span>
        </div>
        <div class="case">
          <a-tree-select
            v-model="xzvalue"
            style="width: 100%"
            allow-clear
            :tree-data="xztreeData"
            show-search
            tree-checkable
            dropdownClassName="test"
            :dropdown-style="{
              height: '405px',
              overflow: 'auto',
              width: '500px',
            }"
            :show-checked-strategy="SHOW_PARENT"
            search-placeholder="Please select"
            :treeDefaultExpandAll="true"
          />
        </div>
      </div>
      <div class="Filter">
        <div class="tit">
          <span>规划</span>
        </div>
        <div class="case">
          <a-tree-select
            v-model="ghvalue"
            style="width: 100%"
            allow-clear
            :tree-data="ghtreeData"
            show-search
            tree-checkable
            :show-checked-strategy="SHOW_PARENT"
            search-placeholder="Please select"
            :treeDefaultExpandAll="true"
          />
        </div>
      </div>
    </div>
    <!-- <div @click="submit" class="submit">
      <div class="icon">
        <img src="../../../../../assets/images/init/执行.png" alt="" />
      </div>
      <div class="zhixing">
        <span>
          执行
        </span>
      </div>
    </div>-->
    <el-button @click="submit" class="submit" :loading="submitLoading">
      <div class="icon">
        <img src="../../../../../assets/images/init/执行.png" alt />
      </div>
      <div class="zhixing">
        <span>执行</span>
      </div>
    </el-button>
  </div>
</template>

<script>
import {
  getRegion,
  getLindi,
  getshparea,
  getTdlybgtj,
  getYjjbnt,
  getWdlygd,
  getYjsy,
  getTdcr,
  getJz,
  getCunluo,
  getTdsc,
  getHdsq,
  getGtkjgh,
  getZtghA,
  getZtghB,
} from "../../../../../api/connect";
import { TreeSelect } from "ant-design-vue";
import { mapActions, mapState } from "vuex";
const SHOW_PARENT = TreeSelect.SHOW_PARENT;

const ghtreeData = [
  {
    title: "全部",
    value: "0-0",
    key: "0-0",
    children: [
      {
        title: "国土空间规划三区三线",
        value: "gtkjgh",
        key: "1",
      },
      {
        title: "土地利用总体规划",
        value: "tdlyztgh",
        key: "2",
      },
      // {
      //   title: "土地利用现状图层",
      //   value: "0-0-1",
      //   key: "0-0-1",
      // },
      // {
      //   title: "三区三线图层",
      //   value: "0-0-2",
      //   key: "0-0-2",
      // },
      // {
      //   title: "住建规划河宽",
      //   value: "0-0-3",
      //   key: "0-0-3",
      // },
      // {
      //   title: "三区三线图层",
      //   value: "0-0-4",
      //   key: "0-0-4",
      // },
    ],
  },
];
const xztreeData = [
  {
    title: "全部",
    value: "0-0",
    key: "0-0",
    children: [
      {
        title: "永久基本农田",
        value: "yjnt",
        key: 1,
      },
      {
        title: "稳定利用耕地",
        value: "wdgd",
        key: 2,
      },
      {
        title: "一级水源保护区",
        value: "yjsy",
        key: 3,
      },
      {
        title: "土地利用变更调查（2018）",
        value: "tdbg",
        key: 4,
      },
      {
        title: "林地",
        value: "lindi",
        key: 5,
      },
      {
        title: "河道三期勘界",
        value: "hdsq",
        key: 6,
      },
      {
        title: "已签协议范围",
        value: "tdsc",
        key: 7,
      },
      {
        title: "截至2021年10月15日土地供应数据",
        value: "tdcr",
        key: 8,
      },
      {
        title: "2019建筑物普查",
        value: "jzwdc",
        key: 9,
      },
      {
        title: "选址涉及村落一栏表",
        value: "cl",
        key: 10,
      },
    ],
  },
];
export default {
  data() {
    return {
      radio: "0",
      radioType: "m²",
      dixingType: "",
      // fileList: [],
      xzvalue: [
        "hdsq",
        "tdsc",
        "cl",
        "jzwdc",
        "tdcr",
        "yjsy",
        "wdgd",
        "yjnt",
        "tdbg",
        "lindi",
      ],
      xztreeData,
      ghvalue: ["gtkjgh", "tdlyztgh"],
      // 规划的图层树
      ghtreeData,

      // 现状选中图层的id
      // xzRes: [],

      SHOW_PARENT,

      // 提交的loading
      submitLoading: false,

      // 判断是否是绘制多边形时点击的右键
      openPolygonDraw: false,

      // // 判断是shp文件上传还是绘制
      // isRegion: true,
    };
  },
  computed: {
    ...mapState("Sjsx", [
      "polygonDrawing",
      "isRegion",
      // "isUploadRegion",
      // "isDrawRegion",
      "radioChoise",
      "IsShowBoune",
    ]),
    fileList: {
      get() {
        return this.$store.state.Sjsx.fileList;
      },
      set(val) {
        this.$store.state.fileList = val;
      },
    },
  },

  watch: {
    fileList: {
      handler(newval) {
        console.log(newval);
      },
      deep: true,
    },
  },
  methods: {
      BouneClick(){
          this.$store.state.Sjsx.IsShowBoune=!this.$store.state.Sjsx.IsShowBoune;
      },
    ...mapActions({
      setRadioChoise_act: "Sjsx/setRadioChoise_act",
      setIsRegion_act: "Sjsx/setIsRegion_act",
      setLoading_act: "Sjsx/setLoading_act",
      setResultData_act: "Sjsx/setResultData_act",
      setunit_act: "Sjsx/setunit_act",
      setAreaData_act: "Sjsx/setAreaData_act",
      setTDresulrData_act: "Sjsx/setTDresulrData_act",
      setYjjbntData_act: "Sjsx/setYjjbntData_act",
      setWdlygdData_act: "Sjsx/setWdlygdData_act",
      setyjsyData_act: "Sjsx/setyjsyData_act",
      settdcrData_act: "Sjsx/settdcrData_act",
      setjzData_act: "Sjsx/setjzData_act",
      setCunluoData_act: "Sjsx/setCunluoData_act",
      setTdscData_act: "Sjsx/setTdscData_act",
      setHdsqData_act: "Sjsx/setHdsqData_act",
      setGtkjghData_act: "Sjsx/setGtkjghData_act",
      setTdlyztghAData_act: "Sjsx/setTdlyztghAData_act",
      setTdlyztghBData_act: "Sjsx/setTdlyztghBData_act",
      setTuliData_act: "Sjsx/setTuliData_act",
      setImportLoading_act: "Sjsx/setImportLoading_act",
      setDrawLoading_act: "Sjsx/setDrawLoading_act",
      setOpenPolygonDraw_act: "Sjsx/setOpenPolygonDraw_act",
      setFileList_act: "Sjsx/setFileList_act",
    }),

    // radio状态点击事件
    async ChangStatus(val) {
      console.log(val, "val传过来的值");
      if (this.radioChoise && this.radioChoise === val) {
        // 当两个按钮都没有选择时，将radio值设置为0, 并将模型上的图层等都清除，也将右侧数据清除
        this.setRadioChoise_act(0);
        console.log("没选中按钮", this.radioChoise);
        // 当radio的值为0时，将模型上的图层等都清除，并且也将右侧数据清除
        await window.__g.polygon3d.clear();
        await window.__g.polyline.clear();
        await window.__g.marker.clear();
        await window.__g.polygon.clear();
        await window.__g.highlightArea.clear();
        this.setResultData_act(null);
        this.setunit_act(null);
        this.setAreaData_act(null);
        this.setTDresulrData_act(null);
        this.setYjjbntData_act(null);
        this.setWdlygdData_act(null);
        this.setyjsyData_act(null);
        this.settdcrData_act(null);
        this.setjzData_act(null);
        this.setCunluoData_act(null);
        this.setTdscData_act(null);
        this.setHdsqData_act(null);
        this.setGtkjghData_act(null);
        this.setTdlyztghAData_act(null);
        this.setTdlyztghBData_act(null);
        this.setTuliData_act(null); // 清除图例
      } else {
        // 当用户点击了按钮时，将按钮相对应的值传入到radio中
        this.setRadioChoise_act(val);
        if (val === 1) {
          this.setDrawLoading_act(true); // 当用户点击绘制的radio后，将绘制的loading窗打开
          // 如果val为1 即用户是点击多边形绘制操作，传false给后端为绘制文件
          this.setIsRegion_act(false);
          this.getRegionData(); // 点击后重新画一次绘制的面
          // this.fileList = [];
          this.setFileList_act([]);
        } else if (val === 2) {
          this.setImportLoading_act(true); // 当用户点击导入的radio后，将导入的loading窗打开
          // 如果val为2 即用户是点击导入shp文件操作，传true给后端为导入shp文件
          this.setIsRegion_act(true);
          this.getRegionData(); // 点击后重新画一次导入的面
        }
        console.log("已选中按钮", this.radioChoise);
      }
    },
    //   提交查询
    async submit() {
      if (this.radioChoise != 0) {
        // 提交时将loading设为true，即出现loading窗
        this.submitLoading = true;
        // this.$store.dispatch("Sjsx/setLoading_act", this.submitLoading);
        this.setLoading_act(this.submitLoading);
        // this.xzRes = [];
        // await window.__g.polygon.clear();

        console.log(this.radioType);
        console.log(this.dixingType);
        console.log(this.xzvalue, "xzvalue");
        console.log(this.ghvalue, "ghvalue");
        // 当为全选时，将所有的东西都加入
        if (this.xzvalue[0] == "0-0") {
          // console.log("kkkkk");
          this.xzvalue = [
            "hdsq",
            "tdsc",
            "cl",
            "jzwdc",
            "tdcr",
            "yjsy",
            "wdgd",
            "yjnt",
            "tdbg",
            "lindi",
          ];
        }
        if (this.ghvalue[0] == "0-0") {
          // console.log("kkkkk");
          this.ghvalue = ["gtkjgh", "tdlyztgh"];
        }
        // 清空vuex数据
        this.setResultData_act(null);
        this.setunit_act(null);
        this.setAreaData_act(null);
        this.setTDresulrData_act(null);
        this.setYjjbntData_act(null);
        this.setWdlygdData_act(null);
        this.setyjsyData_act(null);
        this.settdcrData_act(null);
        this.setjzData_act(null);
        this.setCunluoData_act(null);
        this.setTdscData_act(null);
        this.setHdsqData_act(null);
        this.setGtkjghData_act(null);
        this.setTdlyztghAData_act(null);
        this.setTdlyztghBData_act(null);

        // // 与左上角现状进行复选框的联动
        // let test = this.xztreeData[0].children.filter((item) => {
        //   if (this.xzvalue.indexOf(item.value) > -1) {
        //     return item;
        //   }
        // });
        // this.xzRes = test.map((item) => {
        //   return item.key;
        // });
        // console.log(this.xzRes, "res的值");
        // this.$emit("setXzCheckedArr", this.xzRes);

        // this.xztreeData.forEach((item,index)=>{
        //   if(this.xzvalue.indexOf() )
        // })
        // const request = [];

        // 当选择了林地，或者为全选时
        if (this.xzvalue.indexOf("lindi") !== -1) {
          // 获取林地数据
          getLindi(this.isRegion)
            .then((res) => {
              if (res.code === 200) {
                console.log("%c 林地计算结果", "color:green", res);
                // this.$store.dispatch("Sjsx/setResultData_act", res.data);
                this.setResultData_act(res.data);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }

        if (this.xzvalue.indexOf("tdbg") !== -1) {
          // indexOf判断是否有该数据
          // 获取土地利用现状数据
          getTdlybgtj(this.isRegion)
            .then((res) => {
              if (res.code === 200) {
                console.log("%c 土地利用现状计算结果", "color:green", res);
                // this.$store.dispatch("Sjsx/setTDresulrData_act", res.data);
                this.setTDresulrData_act(res.data);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }

        if (this.xzvalue.indexOf("yjnt") !== -1) {
          // indexOf判断是否有该数据
          // 获取永久基本农田数据
          // const yjntResult = await getYjjbnt();
          getYjjbnt(this.isRegion)
            .then((res) => {
              if (res.code === 200) {
                console.log("%c 永久基本农田计算结果", "color:green", res);
                // this.$store.dispatch("Sjsx/setYjjbntData_act", res.data);
                this.setYjjbntData_act(res.data);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }

        if (this.xzvalue.indexOf("wdgd") !== -1) {
          // indexOf判断是否有该数据
          // 获取稳定利用耕地数据
          // const wdlygdResult = await getWdlygd();
          getWdlygd(this.isRegion)
            .then((res) => {
              if (res.code === 200) {
                console.log("%c 稳定利用耕地计算结果", "color:green", res);
                // this.$store.dispatch("Sjsx/setWdlygdData_act", res.data);
                this.setWdlygdData_act(res.data);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }

        if (this.xzvalue.indexOf("yjsy") !== -1) {
          // indexOf判断是否有该数据
          // 获取一级水源保护区数据
          // const yjsyResult = await getYjsy();
          getYjsy(this.isRegion)
            .then((res) => {
              if (res.code === 200) {
                console.log("%c 一级水源保护区计算结果", "color:green", res);
                // this.$store.dispatch("Sjsx/setyjsyData_act", res.data);
                this.setyjsyData_act(res.data);
              }
            })
            .catch((err) => {
              // if(res.code === 500){
              //   this.$message.error(err)
              // }
              console.log(err);
            });
        }

        if (this.xzvalue.indexOf("tdcr") !== -1) {
          // indexOf判断是否有该数据
          // 获取土地出让数据
          // const tdcrResult = await getTdcr();
          // console.log("%c 土地出让计算结果", "color:green", tdcrResult);
          // this.$store.dispatch("Sjsx/settdcrData_act", tdcrResult.data);
          getTdcr(this.isRegion)
            .then((res) => {
              if (res.code === 200) {
                console.log("%c 土地出让计算结果", "color:green", res);
                // this.$store.dispatch("Sjsx/settdcrData_act", res.data);
                this.settdcrData_act(res.data);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }

        if (this.xzvalue.indexOf("jzwdc") !== -1) {
          // indexOf判断是否有该数据
          // 获取建筑数据
          // const jzResult = await getJz();
          getJz(this.isRegion)
            .then((res) => {
              if (res.code === 200) {
                console.log("%c 建筑计算结果", "color:green", res);
                // this.$store.dispatch("Sjsx/setjzData_act", res.data);
                this.setjzData_act(res.data);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }

        if (this.xzvalue.indexOf("cl") !== -1) {
          // indexOf判断是否有该数据
          // 获取村落数据
          // const cunluoResult = await getCunluo();
          getCunluo(this.isRegion)
            .then((res) => {
              if (res.code === 200) {
                console.log("%c 村落计算结果", "color:green", res);
                // this.$store.dispatch("Sjsx/setCunluoData_act", res.data);
                this.setCunluoData_act(res.data);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }

        if (this.xzvalue.indexOf("tdsc") !== -1) {
          // indexOf判断是否有该数据
          // 获取土地存储数据
          // const tdscResult = await getTdsc();
          getTdsc(this.isRegion)
            .then((res) => {
              if (res.code === 200) {
                console.log("%c 土地收储计算结果", "color:green", res);
                // this.$store.dispatch("Sjsx/setTdscData_act", res.data);
                this.setTdscData_act(res.data);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }

        // 河道三期获取数据 getHdsq
        if (this.xzvalue.indexOf("hdsq") !== -1) {
          // indexOf判断是否有该数据
          // 获取河道三期勘界的数据
          // const tdscResult = await getTdsc();
          getHdsq(this.isRegion)
            .then((res) => {
              if (res.code === 200) {
                console.log("%c 河道三期勘界计算结果", "color:green", res);
                // this.$store.dispatch("Sjsx/setTdscData_act", res.data);
                this.setHdsqData_act(res.data);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }

        // ------ 规划 -------
        if (this.ghvalue.indexOf("gtkjgh") !== -1) {
          //获取国土空间规划数据
          // const gtkjghResult = await getGtkjgh();
          // if (gtkjghResult.code === 500) {
          //   this.$message.error("服务器错误");
          // }
          getGtkjgh(this.isRegion)
            .then((res) => {
              if (res.code === 200) {
                console.log("%c 国土空间规划计算结果", "color:green", res);
                // this.$store.dispatch("Sjsx/setGtkjghData_act", res.data);
                this.setGtkjghData_act(res.data);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }
        if (this.ghvalue.indexOf("tdlyztgh") !== -1) {
          //获取土地利用总体规划的数据
          // const gtkjghResult = await getGtkjgh();
          // if (gtkjghResult.code === 500) {
          //   this.$message.error("服务器错误");
          // }
          // 获取到关系表a的数据
          getZtghA(this.isRegion)
            .then((res) => {
              if (res.code === 200) {
                console.log(
                  "%c 土地利用总体规划关系表a计算结果",
                  "color:green",
                  res
                );
                // this.$store.dispatch("Sjsx/setTdlyztghAData_act", res.data);
                this.setTdlyztghAData_act(res.data);
              }
            })
            .catch((err) => {
              console.log(err);
            });
          // 获取到关系表b的数据
          getZtghB(this.isRegion)
            .then((res) => {
              if (res.code === 200) {
                console.log(
                  "%c 土地利用总体规划关系表b计算结果",
                  "color:green",
                  res
                );
                // this.$store.dispatch("Sjsx/setTdlyztghBData_act", res.data);
                this.setTdlyztghBData_act(res.data);
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }

        // 判断选择了什么单位
        // this.$store.dispatch("Sjsx/setunit_act", this.radioType);
        this.setunit_act(this.radioType);
        this.getshpareaData(); // 获取到绘制或导入的面积的面积
      } else {
        this.$alert("请先选择要查看的地块范围！", "注意", {
          confirmButtonText: "确定",
          type: "warning",
        });
      }
    },
    // 画面（绘制或上传的面积）
    async getRegionData() {
      try {
        // let data = {
        //   isRegion: this.isRegion,
        // }
        // debugger

        // 上传完毕后，请求数据之前清除右侧的东西
        // 清空vuex数据
        this.setResultData_act(null);
        this.setunit_act(null);
        this.setAreaData_act(null);
        this.setTDresulrData_act(null);
        this.setYjjbntData_act(null);
        this.setWdlygdData_act(null);
        this.setyjsyData_act(null);
        this.settdcrData_act(null);
        this.setjzData_act(null);
        this.setCunluoData_act(null);
        this.setTdscData_act(null);
        this.setHdsqData_act(null);
        this.setGtkjghData_act(null);
        this.setTdlyztghAData_act(null);
        this.setTdlyztghBData_act(null);
        this.setTuliData_act(null); // 清除图例

        const result = await getRegion(this.isRegion);
        const polylinedata = [];
        __g.polyline.clear(null);
        result.data.map((pro, index) => {
          let resultdata = JSON.parse(pro.st_asgeojson);
          resultdata.geometry.coordinates.forEach((item) => {
            if (
              item instanceof Array &&
              item[0] instanceof Array &&
              item[0][0] instanceof Array
            ) {
              item.forEach((mon) => {
                polylinedata.push({
                  id: "polyline_1" + index,
                  groupId: "line1",
                  coordinates: mon, //构成折线的坐标点数组
                  color: [0, 1, 1, 1], //折线颜色
                  style: 5, //折线样式 参考样式枚举：PolylineStyle
                  thickness: 20, //折线宽度
                  intensity: 5, //亮度
                  flowRate: 0.5, //流速
                  tiling: 0, //材质贴图平铺比例
                  shape: 0, //折线类型 0：直线， 1：曲线
                  depthTest: false, //是否做深度检测
                  coordinateType: 0,
                });
              });
              item.forEach((mon) => {
                polylinedata.push({
                  id: "polyline_2" + index,
                  groupId: "line2",
                  coordinates: mon, //构成折线的坐标点数组
                  color: [0, 1, 1, 1], //折线颜色
                  style: 5, //折线样式 参考样式枚举：PolylineStyle
                  thickness: 3, //折线宽度
                  intensity: 5, //亮度
                  flowRate: 0.5, //流速
                  tiling: 0, //材质贴图平铺比例
                  shape: 0, //折线类型 0：直线， 1：曲线
                  depthTest: false, //是否做深度检测
                  coordinateType: 0,
                });
              });
            } else {
              polylinedata.push({
                id: "polyline_1" + index,
                coordinates: item, //构成折线的坐标点数组
                groupId: "line1",
                color: [0, 1, 1, 1], //折线颜色
                style: 5, //折线样式 参考样式枚举：PolylineStyle
                thickness: 20, //折线宽度
                intensity: 5, //亮度
                flowRate: 0.5, //流速
                tiling: 0, //材质贴图平铺比例
                shape: 0, //折线类型 0：直线， 1：曲线
                depthTest: false, //是否做深度检测
                coordinateType: 0,
              });
              polylinedata.push({
                id: "polyline_2" + index,
                coordinates: item, //构成折线的坐标点数组
                groupId: "line2",
                color: [0, 1, 1, 1], //折线颜色
                style: 5, //折线样式 参考样式枚举：PolylineStyle
                thickness: 3, //折线宽度
                intensity: 5, //亮度
                flowRate: 0.5, //流速
                tiling: 0, //材质贴图平铺比例
                shape: 0, //折线类型 0：直线， 1：曲线
                depthTest: false, //是否做深度检测
                coordinateType: 0,
              });
            }
          });
          console.log(polylinedata, "polylinedatapolylinedata");
          // let o = {
          //   id: "polygon" + index,
          //   coordinates: resultdata.geometry.coordinates[0][0],
          //   color: Color.Red, //折线颜色
          //   style: PolylineStyle.Arrow, //折线样式 参考样式枚举：PolylineStyle
          //   thickness: 150, //折线宽度
          //   intensity: 0.8, //亮度
          //   flowRate: 0.5, //流速
          //   tiling: 0, //材质贴图平铺比例
          //   shape: 0, //折线类型 0：直线， 1：曲线
          //   depthTest: false, //是否做深度检测
          // };
          // return o;
        });

        await window.__g.polygon3d.clear();
        await window.__g.polyline.clear();
        await window.__g.marker.clear();
        await window.__g.polygon.clear();
        await window.__g.highlightArea.clear();
        await window.__g.polyline.add(polylinedata);
        await window.__g.polyline.focus(polylinedata.map((r) => r.id));
        if (this.isRegion == false) {
          this.setDrawLoading_act(false); // 画面成功后，将绘制的loading窗关闭
        } else if (this.isRegion == true) {
          this.setImportLoading_act(false); // 画面成功后，将导入的loading窗关闭
        }
      } catch (err) {
        this.$message({
          type: "error",
          message: "服务器请求异常，加载图层失败！",
          duration: 3000,
        });
        this.setRadioChoise_act(0);
        if (this.isRegion == false) {
          this.setDrawLoading_act(false); // 请求失败后，将绘制的loading窗关闭
        } else if (this.isRegion == true) {
          this.setImportLoading_act(false); // 请求失败后，将导入的loading窗关闭
        }
        console.log(err);
      }
    },
    // 获取上传完shp后的shp面面积
    async getshpareaData() {
      try {
        // let data = {
        //   isRegion: this.isRegion,
        // };
        const result = await getshparea(this.isRegion);
        console.log(result, "getshparearesult");
        if (result.code === 200) {
          // this.$store.dispatch("Sjsx/setResultCode_act", result.code)
          this.submitLoading = false; //当请求后的状态码为200时，将loading取消
          // this.$store.dispatch("Sjsx/setLoading_act", this.submitLoading);
          // this.$store.dispatch("Sjsx/setAreaData_act", result.data);
          this.setLoading_act(this.submitLoading);
          this.setAreaData_act(result.data);
          this.$message.success("数据加载完成！");
        }
      } catch (err) {
        this.submitLoading = false;
        // this.$store.dispatch("Sjsx/setLoading_act", this.submitLoading);
        this.setLoading_act(this.submitLoading);
        this.$message.error("服务器请求异常，加载数据失败！");
        console.log(err, "提交时的错误");
      }
    },

    //上传文件的状态发生改变时触发  调用了shp文件上传接口
    async handleChange(info) {
      console.log(info, "info");

      //上传文件
      if (
        info.file.type == "application/zip" ||
        info.file.type == "application/x-zip-compressed"
      ) {
        this.setImportLoading_act(true); // 点击完导入面积后，将导入面积的loading窗打开
        console.log("SETS");

        let fileList = [...info.fileList];
        // let fileList = [info.fileList];
        // 1. Limit the number of uploaded files
        //    Only to show two recent uploaded files, and old ones will be replaced by the new
        fileList = fileList.slice(-1); // 对上传列表的数量进行限制
        // console.log(fileList,'slice(-2)');
        this.setFileList_act(fileList);

        // 2. read from response and show file link
        fileList = fileList.map((file) => {
          if (file.response) {
            // Component will show file.url as link
            file.url = file.response.url;
          }
          // 上传完毕之后去请求数据
          if (file.status === "done") {
            // 通过导入shp面积上传后，将radio的值设为2，即将导入的按钮点亮
            // this.$store.dispatch("Sjsx/setRadioChoise_act", 2);
            this.setRadioChoise_act(2);

            // // 上传完图层后，将要查看的信息设置为全选
            // this.xzvalue = [
            //   "tdsc",
            //   "cl",
            //   "jzwdc",
            //   "tdcr",
            //   "yjsy",
            //   "wdgd",
            //   "yjnt",
            //   "tdbg",
            //   "lindi",
            // ];
            // this.ghvalue = ["gtkjgh", "tdlyztgh"];

            // 当为上传shp文件时，将isRegion设置为true
            // this.$store.dispatch("Sjsx/setIsRegion_act", true);
            this.setIsRegion_act(true);

            // 清空完后再进行数据的请求
            this.getRegionData();
            this.setImportLoading_act(false); // 请求完数据，即画完面成功后，将loading窗关闭
          } else if (file.status === "error") {
            this.$message({
              type: "error",
              message: "服务器请求异常，图层导入失败！",
              duration: 3000,
            });
            this.setImportLoading_act(false); // 因网络请求异常，导入图层失败，将loading窗关闭
          }
          return file;
        });

        this.fileList = fileList;
        console.log(this.fileList, "this.fileList的值");
      } else {
        this.$message({
          type: "error",
          message: "上传文件类型有误，请上传zip文件！",
          duration: 3000,
        });
        return;
      }

      //删除文件
      if (info.file.status == "removed") {
        // console.log("删除文件");
        // 清空vuex数据
        this.setResultData_act(null);
        this.setunit_act(null);
        this.setAreaData_act(null);
        this.setTDresulrData_act(null);
        this.setYjjbntData_act(null);
        this.setWdlygdData_act(null);
        this.setyjsyData_act(null);
        this.settdcrData_act(null);
        this.setjzData_act(null);
        this.setCunluoData_act(null);
        this.setTdscData_act(null);
        this.setHdsqData_act(null);
        this.setGtkjghData_act(null);
        this.setTdlyztghAData_act(null);
        this.setTdlyztghBData_act(null);
        this.setTuliData_act(null); // 清除图例

        // 清除所有模型
        await window.__g.polygon3d.clear();
        await window.__g.polyline.clear();
        await window.__g.marker.clear();
        await window.__g.polygon.clear();
        await window.__g.highlightArea.clear();
        this.setRadioChoise_act(0); // 将地块范围的radio按钮设为0，即都不选
        this.setImportLoading_act(false); // 删除后，将loading窗关闭
      }

      // // 按钮判断
      // if(this.radioChoise == 0 || this.radioChoise == 1){

      // }
    },

    // 多边绘制点击的事件
    polygonClick() {
      this.$message({
        type: "warning",
        dangerouslyUseHTMLString: true,
        message: "请点击左键进行绘制;<br />若要完成绘制，请点击右键！",
        duration: 6000, // 设置为0时，则不会自动关闭
        // showClose:true, //显示关闭按钮
      });
      let lineType = 0; //0：直线，1：曲线
      let buildType = 1; //0：画多点线段， 1：画多边形
      let color = Color.Red; //绘制颜色
      __g.editHelper.setParam(lineType, buildType, color);
      __g.editHelper.start();
      // 当绘制时点击右键时，将openPolygonDraw值设置为true，即触发提示框
      this.openPolygonDraw = true;
      this.setOpenPolygonDraw_act(this.openPolygonDraw);
      // this.$store.dispatch("Sjsx/setOpenPolygonDraw_act", this.openPolygonDraw);
    },

    onChange(val) {
      console.log(val);
    },
    dixingonChange() {},
    // bounedButton(){
        
    //   if(this.IsShowBoune==false){
    //       this.IsShowBoune=true
    //   }else{
    //       this.IsShowBoune=false
    //   }
    //     console.log(11111111111);
    // }
  },
  created() {
    // this.$store.dispatch("Sjsx/setIsUploadRegion_act", false);
    // this.$store.dispatch("Sjsx/setIsDrawRegion_act", false);
    // this.$store.dispatch("Sjsx/setOpenPolygonDraw_act", false);
    this.setOpenPolygonDraw_act(false);
  },
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  components: {},
};
</script>

<style lang="scss" scoped>
/deep/.ant-select-tree-dropdown {
  left: 300px !important;
}
.EventFiltering {
  //   top: 0;
  //   position: absolute;
  width: 92%;
  padding: 10px 20px;
  box-sizing: border-box;
  margin-top: 2px;
  //   margin: 20px auto;
  //   border: 1px solid #fff;
  background: linear-gradient(
      180deg,
      rgba(0, 50, 105, 0.432802) 0%,
      rgba(4, 17, 32, 0.5) 100%
    ),
    rgba(0, 5, 10, 0.334353);
  height: 405px;
  border-radius: 0 4px 4px 0;
  .title {
    width: 100%;
    height: 35px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #4672a4a1;
    padding-bottom: 5px;
    font-size: 18px;
    .icon {
      width: 13px;
      height: 13px;
      margin: 0 13px 0 5px;
      img {
        width: 100%;
      }
    }
  }
  .Filtering_box {
    margin: 1px 0;
    height: 290px;
    overflow: auto;
    &::-webkit-scrollbar {
      width: 4px;
    }
    &::-webkit-scrollbar-thumb {
      // background: -webkit-gradient(
      //             linear,
      //             left top,
      //             left bottom,
      //             from(#83a6a6),
      //             to(#483d8b)
      // );
      // background: linear-gradient(180deg, #83a6a6, #483d8b, #83a6a6);
      background: linear-gradient(
        180deg,
        rgba(131, 166, 166, 0.1),
        rgba(131, 166, 166, 0.8),
        rgba(131, 166, 166, 0.1)
      );
      border-radius: 10px;
    }
    &::-webkit-scrollbar-track-piece {
      background: transparent;
    }
    .Filter {
      margin: 30px 0;

      display: flex;
      justify-content: space-around;
      color: #fff;
      align-items: center;

      .tit {
        width: 30%;
        font-family: OPPOSans;
        font-style: normal;
        font-weight: normal;
        font-size: 16px;
        line-height: 21px;

        color: #ffffff;
      }
      .case {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        // justify-content: space-around;
        justify-content: space-between;
        width: 70%;
        .draw_area {
          display: flex;
          justify-content: space-around;
          align-items: center;
          .status {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            margin-right: 10px;
            cursor: pointer;
          }
        }
        .import_area {
          display: flex;
          justify-content: space-around;
          align-items: center;
          .status {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            cursor: pointer;
            margin-right: 10px;
          }
        }
        /deep/ .ant-radio-wrapper {
          color: #fff;
        }
        /deep/ .ant-radio-inner {
          background: rgba(255, 255, 255, 0.644);
        }
        /deep/ .ant-radio-button-wrapper:last-child {
          border-radius: 4px;
        }

        /deep/.ant-radio-button-wrapper {
          color: #ffffff;

          background: rgba(255, 255, 255, 0.1);
          box-sizing: border-box;
          padding: 0 10px;
          border: 1px solid rgba(255, 255, 255, 0.2);
        }
        /deep/.ant-upload-list,
        .ant-upload-list-text {
          position: absolute;
          left: 0px;
          right: 0;
          margin-top: 3px;
          border-radius: 4px;
          display: block;
          color: rgb(255, 255, 255);
          z-index: 10;
          background: rgba(0, 0, 0, 0.342);
        }
        /deep/ .ant-upload-list-item-info .anticon-loading,
        .ant-upload-list-item-info .anticon-paper-clip {
          color: #fff;
        }
        /deep/ .ant-select,
        .ant-select-enabled {
          width: 100%;
        }
        /deep/ .ant-select-selection {
          background: rgba(0, 0, 0, 0.144);
          color: #fff;
        }
        /deep/ .ant-select-arrow {
          color: #ffffff;
        }
        /deep/.ant-btn:hover,
        .ant-btn:focus,
        .ant-btn:active,
        .ant-btn.active {
          background: rgba(0, 0, 0, 0);
        }
        /deep/.ant-btn {
          background: rgba(0, 0, 0, 0);
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: space-around;
          border: none;
          padding: 0 10px;
          border: 1px solid rgba(255, 255, 255, 0.2);
          background: rgba(255, 255, 255, 0.1);
          width: 80px;
        }
      }
    }
  }
  .submit {
    width: 100%;
    height: 45px;
    background: #89b8e346;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      color: aqua;
      transform: scale(0.9);
    }
    .icon {
      margin: 0 10px;
      img {
        width: 16px;
      }
    }
    .zhixing {
      font-size: 14px;
    }
    &::before {
      position: absolute;

      width: 101%;
      height: 101%;
      top: 0;
      left: 0;
      background: url("../../../../../assets/images/init/btnwrap.png") no-repeat
        center/cover;
      z-index: 10;
      content: "";
    }
  }
}
</style>
<style lang="scss">
/* 两个按钮样式 */
.ant-select-selection--multiple .ant-select-selection__choice {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0);
  border: none;
}
.ant-select-selection--multiple .ant-select-selection__choice__remove {
  color: #ffffff;
}
.ant-select-selection--multiple .ant-select-selection__choice__remove:hover {
  color: rgba(42, 130, 245, 0.85);
}
.ant-radio-button-wrapper:not(:first-child)::before {
  width: 0px;
}

/* 下拉框列表样式 */
// 整体背景
.ant-select-dropdown {
  background: rgba(11, 48, 64, 0.73);
  top: 585px !important;
  left: 420px !important;

  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-thumb {
    // background: -webkit-gradient(
    //             linear,
    //             left top,
    //             left bottom,
    //             from(#83a6a6),
    //             to(#483d8b)
    // );
    // background: linear-gradient(180deg, #83a6a6, #483d8b, #83a6a6);
    background: linear-gradient(
      180deg,
      rgba(131, 166, 166, 0.1),
      rgba(131, 166, 166, 0.8),
      rgba(131, 166, 166, 0.1)
    );
    border-radius: 10px;
  }
  &::-webkit-scrollbar-track-piece {
    background: transparent;
  }
}
.ant-select-tree {
  font-size: 20px;
}
.ant-select-selection {
  font-size: 15px;
}
// 复选框文字
.ant-select-tree li .ant-select-tree-node-content-wrapper {
  color: #ffffff;
}
.anticon {
  color: #ffffff;
}
// 全选框的背景颜色
.ant-select-tree-checkbox-indeterminate .ant-select-tree-checkbox-inner::after {
  background: rgba(10, 165, 231, 0.6);
}
.ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner {
  background-color: rgba(172, 230, 255, 0);
  border-color: #ace6ff;
}
.ant-select-tree-checkbox-inner {
  border-color: rgba(172, 230, 255, 0.5);
  background: rgba(172, 230, 255, 0);
}
// 鼠标移上去的hover事件
.ant-select-tree li .ant-select-tree-node-content-wrapper:hover {
  background-color: rgba(172, 230, 255, 0.5);
}
.ant-upload-list-item:hover .ant-upload-list-item-info {
  background-color: rgba(172, 230, 255, 0.5);
  height: 100%;
}
// 清除
.ant-select-selection__clear {
  color: #ffffff;
  background: rgba(172, 230, 255, 0);
}

.el-button {
  border: none;
  span {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
  }
}

.el-radio {
  display: flex;
  align-items: center;
  font-weight: 400;
}
.el-radio__label {
  font-size: 16px;
}

// loading
.el-icon-loading {
  color: #ffffff;
  margin-bottom: 3px;
  font-size: 14px;
}
</style>
